import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

class LineChartSample extends StatefulWidget {
  final List data;
  LineChartSample({Key key, this.data}) : super(key: key);

  @override
  State<StatefulWidget> createState() => MyState();
}

class MyState extends State<LineChartSample> {
  List<FlSpot> spots = [];

  stringToDouble(str) {
    return double.parse(str.toString());
  }

  @override
  Widget build(BuildContext context) {
    spots = [
      FlSpot(0, stringToDouble(widget.data[0])),
      FlSpot(2, stringToDouble(widget.data[1])),
      FlSpot(4, stringToDouble(widget.data[2])),
      FlSpot(6, stringToDouble(widget.data[3])),
      FlSpot(8, stringToDouble(widget.data[4])),
      FlSpot(10, stringToDouble(widget.data[5])),
      FlSpot(12, stringToDouble(widget.data[6])),
    ];

    List arr = [];

    for(var item in widget.data) {
      arr.add(item);
    }

    arr.sort();
    double maxY = double.parse(arr[arr.length-1].toString());

    if(maxY < 1) {
      maxY = 1;
    }

    List<Color> gradientColors = [
      Color(0xff297CFF),
      Color(0xffCBDFFD),
    ];
    return  Container(
      width: double.infinity,
      child: Padding(
        padding: const EdgeInsets.only(right: 18.0, left: 12.0, top: 24, bottom: 12),
        child: FlChart(
          chart: LineChart(
            LineChartData(
              gridData: FlGridData(
                show: false,
                drawHorizontalGrid: false,
                getDrawingVerticalGridLine: (value) {
                  return const FlLine(
                    color: Color(0xffeeeeee),
                    strokeWidth:  1,
                  );
                },
                getDrawingHorizontalGridLine: (value) {
                  return const FlLine(
                    color: Color(0xff37434d),
                    strokeWidth: 1,
                  );
                },
              ),
              titlesData: FlTitlesData(
                show: true,
                bottomTitles: SideTitles(
                  showTitles: true,
                  reservedSize: 22,
                  textStyle: TextStyle(
                    color: const Color(0xff68737d),
                    fontSize: 12
                  ),
                  getTitles: (value) {
                    switch(value.toInt()) {
                      case 0: return '周一';
                      case 2: return '周二';
                      case 4: return '周三';
                      case 6: return '周四';
                      case 8: return '周五';
                      case 10: return '周六';
                      case 12: return '周末';
                    }
                    return '';
                  },
                  margin: 8,
                ),
                leftTitles: SideTitles(
                  showTitles: true,
                  textStyle: TextStyle(
                    color: const Color(0xff999999),
                    // fontWeight: FontWeight.bold,
                    fontSize: 12,
                  ),
                  getTitles: (value) {
                    var y = (maxY * 0.2).toInt();

                    if(value % y == 0) {
                      return value.toString();
                    }
                  },
                  reservedSize: 13,
                  margin: 12,
                ),
              ),
              borderData: FlBorderData(
                show: false,
                border: Border.all(color: Color(0xff37434d), width: 1)
              ),
              minX: 0,
              maxX: 13,
              minY: 0,
              maxY: maxY,
              lineBarsData: [
                LineChartBarData(
                  spots: spots,
                  isCurved: true,
                  colors: gradientColors,
                  barWidth: 2.5,
                  isStrokeCapRound: true,
                  dotData: FlDotData(
                    show: false,
                  ),
                  belowBarData: BelowBarData(
                    show: true,
                    gradientTo: Offset(0, 0.8),
                    colors: gradientColors.map((color) => color.withOpacity(0.3)).toList(),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
 }